﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta http-equiv=content-type content="text/html; charset=utf-8">
	<link href="CM/contextmenu.css" type=text/css rel=stylesheet>
	<style type=text/css>
		body {font: normal 12px tahoma, arial, helvetica, sans-serif;}
		.target {
			border-right: #ffccee 1px solid;
			padding-right: 5px;
			border-top: #ffccee 1px solid;
			padding-left: 5px;
			left: 200px;
			padding-bottom: 5px;
			border-left: #ffccee 1px solid;
			color: #fff;
			padding-top: 5px;
			border-bottom: #ffccee 1px solid;
			position: absolute;
			top: 400px;
			background-color: blue;
		}
	</style>

	<script src="CM/jquery.js" type=text/javascript></script>
	<script src="CM/jquery.contextmenu.js" type=text/javascript></script>

<script type=text/javascript>
$().ready(function() {
	var option = { 
		width: 150, 
		items: [
			{ text: "第一项", icon: "CM/images/icons/ico1.gif", alias: "1-1", action: menuAction },
			{ text: "第二项", icon: "CM/images/icons/ico2.gif", alias: "1-2", action: menuAction },
			{ text: "第三项", icon: "CM/images/icons/ico3.gif", alias: "1-3", action: menuAction },
			{ type: "splitLine" },
			{ text: "组一集合", icon: "CM/images/icons/ico4.gif", alias: "1-4", type: "group", width: 170, items: [
				{ text: "组三集合", icon: "CM/images/icons/ico4-1.gif", alias: "2-2", type: "group", width: 190, items: [
					{ text: "组3一项", icon: "CM/images/icons/ico4-1-1.gif", alias: "3-1", action: menuAction },
					{ text: "组3二项", icon: "CM/images/icons/ico4-1-1.gif", alias: "3-2", action: menuAction }
				]},
				{ text: "组1一项", icon: "CM/images/icons/ico4-2.gif", alias: "2-1", action: menuAction },
				{ text: "组1二项", icon: "CM/images/icons/ico4-3.gif", alias: "2-3", action: menuAction },
				{ text: "组1三项", icon: "CM/images/icons/ico4-4.gif", alias: "2-4", action: menuAction }
			]},
			{ type: "splitLine" },
			{ text: "第四项", icon: "CM/images/icons/ico5.gif", alias: "1-5", action: menuAction },
			{ text: "组二集合", icon: "CM/images/icons/ico6.gif", alias: "1-6", type: "group", width: 180, items: [
				{ text: "组2一项", icon: "CM/images/icons/ico6-1.gif", alias: "4-1", action: menuAction },
				{ text: "组2二项", icon: "CM/images/icons/ico6-2.gif", alias: "4-2", action: menuAction }
			]}
		], 
		onShow: applyrule,
		onContextMenu: BeforeContextMenu
	};
	
	function menuAction() {
		alert(this.data.alias);
	}
	
	function applyrule(menu) {               
		if (this.id == "target2") {
			menu.applyrule({ 
				name: "target2",
				disable: true,
				items: ["1-2", "2-3", "2-4", "1-6"]
			});
		}else {
			menu.applyrule({ 
				name: "all",
				disable: true,
				items: []
			});
		}
	}
	
	function BeforeContextMenu() {
		return this.id != "target3";
	}
	
	$("#target,#target2,#target3").contextmenu(option);
	
});
</script>
</head>

<body>
	<div class=target id=target>在这里右击[所有菜单]</div>
	<div class=target id=target2 style="left: 600px; top: 100px">在这里右击[disable某些项]</div>
	<div class=target id=target3 style="left: 400px; top: 500px">在这里右击[这个右键不能显示]</div>
</body>
</html>
